<script setup lang="ts">
import { ref, onMounted } from 'vue'
import BaseUpload from '@/components/base-upload/index.vue'
import { $enums } from '@/utils/dict.ts'

const uploadFileList = ref([])

const uploadImageList = ref([])

const uploadRef = ref()

onMounted(() => {
  setTimeout(() => {
    uploadFileList.value = [
      {
        fileName: 'BowlingBallCali_ZH-CN0434558966_UHD.jpg',
        filePath: 'fada/test/1848613483432632320_BowlingBallCali_ZH-CN0434558966_UHD.jpg',
        fileSize: 3060400,
        bucketName: 'cf-private',
        previewUrl:
          'http://10.86.120.250:19000/cf-private/fada/test/1848613483432632320_BowlingBallCali_ZH-CN0434558966_UHD.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=O9WUEFSKN2JQ5IAMGPCJ%2F20241022%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20241022T063254Z&X-Amz-Expires=180&X-Amz-SignedHeaders=host&X-Amz-Signature=61f34af1a99bdbbd25fee520f84015628b325c191958477c8f577d398735e717'
      }
    ]
  }, 1000)

  setTimeout(() => {
    uploadImageList.value = [
      {
        fileName: 'AutumnCypress_ZH-CN5099875619_UHD.jpg',
        filePath: 'fada/test/1848612730471178240_AutumnCypress_ZH-CN5099875619_UHD.jpg',
        bucketName: 'cf-private',
        previewUrl:
          'http://10.86.120.250:19000/cf-private/fada/test/1848612730471178240_AutumnCypress_ZH-CN5099875619_UHD.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=O9WUEFSKN2JQ5IAMGPCJ%2F20241022%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20241022T062955Z&X-Amz-Expires=180&X-Amz-SignedHeaders=host&X-Amz-Signature=eabd7f45907e380062e95a5205730c8f891cd82626dfcc5f5db37be1613e3a04'
      }
    ]
  }, 500)
})
</script>

<template>
  <div class="page flex flex-col gap-4 py-2">
    <div class="flex flex-col gap-4 rounded-md bg-white px-4 py-2">
      <h1 class="text-purple">
        普通上传组件
      </h1>

      <BaseUpload
        ref="uploadRef"
        v-model:file-list="uploadFileList"
        accept=".png,.jpg,.jpeg,.mp4,.pdf,.mkv"
        :file-size="5999"
        tip="文件限制辅助文案"
        :minio="true"
        path="/fada/test"
      />
    </div>

    <div class="flex flex-col gap-4 rounded-md bg-white px-4 py-2">
      <h1 class="text-purple">
        导入文件上传
      </h1>

      <BaseUpload
        drag
        template="import"
      />
    </div>

    <div class="flex flex-col gap-4 rounded-md bg-white px-4 py-2">
      <h1 class="text-purple">
        身份证上传
      </h1>

    </div>

    <div class="flex flex-col gap-4 rounded-md bg-white px-4 py-2">
      <h1 class="text-purple">
        图片上传
      </h1>

      <BaseUpload
        v-model:file-list="uploadImageList"
        template="picture"
        multiple
        accept=".png,.jpg,.jpeg"
        tip="文件限制辅助文案"
        :limit="9"
        :exceed-replace="true"
        bucket-type="private"
        :module="$enums.pathModule.CASE"
        :minio="true"
        path="/fada/test"
      />
    </div>
  </div>
</template>

<style scoped lang="less"></style>
